<template>
  <el-dialog :visible.sync="showPointDialog" :before-close="check" title="新增" width="67%">
    <el-card class="box-card">
      <!-- <div slot="header">
        <span class="bold">基本信息</span>
      </div> -->

      <el-row>
        <el-col :span="12">
          <div class="watch required">
            支付渠道名称：
            <el-input
              v-model="billingChannelName"
              size="mini"
              style="width:200px"
              placeholder="请输入名称"
            />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="watch required">
            支付渠道标识：
            <el-input
              v-model="billingChannelId"
              size="mini"
              style="width:200px"
              placeholder="请输入标识"
            />
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <div class="watch required">
            所属业务平台：
            <el-select
              v-model="platformId"
              style="width:200px"
              size="mini"
              placeholder="请选择"
              @change="getName"
            >
              <el-option
                v-for="item of platformArr"
                :key="item.idVal"
                :value="item.idVal"
                :label="item.powerName"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="watch required">是否使用计费码：
            <el-select
              v-model="checkMark"
              style="width:200px"
              size="mini"
              placeholder="请选择"
            >
              <el-option value="0" label="是" />
              <el-option value="1" label="否" />
            </el-select>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <div class="btnall">
      <el-button
        type="primary"
        round
        size="mini"
        style="width:100px"
        @click="save"
      >保存</el-button>
      <el-button
        type="primary"
        plain
        round
        size="mini"
        style="width:100px"
        @click="check"
      >取消</el-button>
    </div>
  <!--  <el-card class="box-card1">
      <div slot="header">
        <span class="bold">计费渠道和计费码</span>
      </div>
      <el-row v-for="item in billingChannelList" :key="item.id">
        <el-col :span="12">
          <div class="watch">计费渠道:{{ item.billingChannelName }}</div>
        </el-col>
        <el-col :span="12">
          <div class="watch">计费码:{{ item.billingCode }}</div>
        </el-col>
      </el-row>
    </el-card> -->

  </el-dialog>
</template>

<script>
import { saveList, nameRepeat, orHasSave } from '@/api/payChannel.js'

import { mapGetters } from 'vuex'
export default {
  name: 'Watch',
  props: {
    addDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checkMark: '0',
      billingChannelId: '',
      billingChannelName: '',
      platformName: '',
      showPointDialog: false, // 遮罩
      platformArr: [],
      platformId: '',
      name: '', // 名字
      price: '', // 价格
      mode: '', // 计费方式,
      cycle: '', // 计费周期
      id: '', // id
      payStyles: [],
      lockPeriod: '',
      isGoon: 1, // 是否自动续订
      billingChannelList: []
    }
  },
  computed: {
    ...mapGetters(['plat'])
  },
  watch: {
    addDialog(newVal) {
      this.showPointDialog = newVal
      // this.loadSelect()
      // this.loadDetail(this.watchId)
    }
  },
  mounted() {
    if (this.plat.length > 1) {
      this.platformArr = this.plat.map(item => {
        var len = item.powerCode.lastIndexOf('-')
        item.idVal = item.powerCode.substr(len + 1)
        return item
      })
    }
    if (this.plat.length === 1) {
      var sina = this.plat[0].powerCode.lastIndexOf('-')
      this.platformArr = this.plat[0].powerCode.substr(sina + 1)
    }
    // this.loadList()
  },
  methods: {
    save() {
      if (!this.billingChannelName) {
        this.$message({
          type: 'error',
          message: '请输入渠道名称'
        })
        return false
      }

      if (!this.billingChannelId) {
        this.$message({
          type: 'error',
          message: '请输入渠道标识'
        })
        return false
      }

      if (!this.platformId) {
        this.$message({
          type: 'error',
          message: '请选择所属平台'
        })
        return false
      }
      nameRepeat({
        billingChannelName: this.billingChannelName
      }).then(res => {
        if (res.resultCode === '0000') {
          orHasSave({
            billingChannelId: this.billingChannelId
          }).then(res => {
            if (res.resultCode === '0000') {
              saveList({
                billingChannelId: this.billingChannelId,
                billingChannelName: this.billingChannelName,
                checkMark: this.checkMark,
                platformId: this.platformId,
                platformName: this.platformName
              }).then(res => {
                if (res.resultCode === '0000') {
                  this.$message({
                    type: 'success',
                    message: '保存成功'
                  })
                  this.check(true)
                }
              })
            }
          })
        }
      })
    },
    // 回调父组件
    check(val) {
      this.showPointDialog = false
      this.$emit('closeAdd', val)
      this.billingChannelId = ''
      this.billingChannelName = ''
      this.checkMark = '0'
      this.platformId = ''
      this.platformName = ''
    },
    getName(val) {
      this.platformArr.forEach(item => {
        if (item.idVal === val) {
          this.platformName = item.powerName
        }
      })
    }
  }
}
</script>

<style scoped>
.required::before{
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
.box-card{
  margin-top: -25px;
}
.box-card1{
  margin-top: 10px;
}
.box-card2{
  margin-top: 10px;
}
.watch{
  margin: 10px 0;
}
.bold{
  font-weight: bold;
}
.el-card__header{
  padding: 9px 20px !important;
}
.btnall{
  margin: 17px auto -12px auto;
  width: 230px;
}
</style>
